/**
 * Copyright 2023 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@use 'sass:math';
@import '~/styles/variables';

.horizontalScrollWrapper {
  -ms-overflow-style: none; // IE and Edge
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2rem;
  scrollbar-width: none; // Firefox
  width: 100%;

  &::-webkit-scrollbar {
    display: none;
  }

  @media screen and (min-width: $medium) {
    margin-bottom: 0;
    padding-bottom: 2rem;
  }

  .macroButtons {
    display: flex;
    gap: 0.9rem;
    justify-content: space-between;
    pointer-events: none;
    width: 100%;

    &.active {
      pointer-events: auto;

      .macroButton {
        &::before {
          transition: all $fadeDuration ease-in-out;
        }
      }
    }

    li {
      flex: 0 1 math.div(100, 9) * 1%;
      min-width: 95px;
      width: math.div(100, 9) * 1%;
    }

    .spacer {
      display: block;
      flex-shrink: 0;
      width: calc(2rem - 0.9rem);

      @media screen and (min-width: $large) {
        display: none;
      }
    }

    .macroButton {
      align-items: center;
      aspect-ratio: 1 / 1;
      color: $dark;
      display: flex;
      flex-flow: column;
      justify-content: center;
      position: relative;
      transition: all $fadeDuration ease-in-out;
      width: 100%;

      @media screen and (min-width: $medium) {
        &:not(.isActive):hover {
          .text {
            opacity: 1;
            transform: translate(0, 0);
          }

          .icon {
            display: block;
            transform: translate(0, 0);
          }

          &:before {
            border-width: 3px;
            opacity: 1;
          }
        }
      }

      &.isActive {
        color: currentColor;

        &::before {
          background-color: $dark;
          opacity: 1;
        }

        &::after {
          background-color: currentColor;
        }
      }

      // Border
      &::before {
        border: 1px solid $dark;
        border-radius: 10px;
        box-sizing: border-box;
        content: '';
        height: 100%;
        left: 0;
        opacity: 0.5;
        position: absolute;
        top: 0;
        transition: all $fadeDuration * 0.5 ease-out;
        width: 100%;
      }

      // Dot
      &::after {
        background-color: $dark;
        border-radius: 4px;
        bottom: 17px;
        content: '';
        display: block;
        height: 4px;
        left: calc(50% - 2px);
        position: absolute;
        width: 4px;
      }

      .icon {
        transform: translate(0, calc(1em - 0.3rem));
        transition: all $fadeDuration ease-in-out;
      }

      .text {
        font-family: $font_mono;
        font-size: 10px;
        font-weight: 700;
        margin: 12px 0;
        opacity: 0;
        text-transform: uppercase;
        transform: translate(0, calc(1em - 0.3rem));
        transition: all $fadeDuration ease-in-out;
      }
    }
  }
}
